<template>
  <div>
    <div id="tabbar">
      <ul>
        <items
          v-for="(item, index) in itemarr"
          :key="index"
          :title="item.title"
          :currimg="currimg"
          :mark="item.mark"
          @change="changecurrimg"
        >
          <template #normal>
            <img :src="item.normal" alt="" />
          </template>
          <template #active>
            <img :src="item.active" alt="" />
          </template>
        </items>
      </ul>
    </div>
  </div>
</template>

<script>
import items from "./tabbaritem";
export default {
  data() {
    return {
      itemarr: [
        {
          normal: "../../../static/images/tabbar/home_normal.png",
          active: "../../../static/images/tabbar/home_active.png",
          title: "首页",
          mark: "home",
        },
        {
          normal: "../../../static/images/tabbar/cart_normal.png",
          active: "../../../static/images/tabbar/cart_active.png",
          title: "购物",
          mark: "shop",
        },
        {
          normal: "../../../static/images/tabbar/wallet_normal.png",
          active: "../../../static/images/tabbar/wallet_active.png",
          title: "钱包",
          mark: "wallet",
        },
        {
          normal: "../../../static/images/tabbar/message_noraml.png",
          active: "../../../static/images/tabbar/message_avtive.png",
          title: "消息",
          mark: "message",
        },
        {
          normal: "../../../static/images/tabbar/profile_normal.png",
          active: "../../../static/images/tabbar/profile_active.png",
          title: "我的",
          mark: "profile",
        },
      ],
      currimg: "home",
    };
  },
  components: {
    items,
  },
  methods: {
    changecurrimg(val) {
      // 更新currimg
      this.currimg = val;
    },
  },
};
</script>

<style lang="less" scoped>
#tabbar {
  width: 100%;
  height: 97px;
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #fff;
  ul {
    display: flex;
  }
}
</style>